<script src="../../utils/util.js"></script>
<template>
  <div>
    <plan-top-m :plan-info="planInfo" @sendCertClick="certClick"></plan-top-m>
    <plan-course-m :course-list="planInfo.subjectList"></plan-course-m>
    <div style="height: 48px"></div>

    <div v-if="planInfo.orgLevelId != 0 && planInfo.orgLevelId ">
      <!-- 等级限制的计划-->
      <div v-if="planInfo.orderInfo.buyStatus === 0" class="signView" @click="levelUp">
        <!-- 未购买 -->
        <div class="associationBtn ellipsis1">
          升级到{{ level }}企业即可解锁该课程
        </div>
      </div>
      <!-- 已达到等级 -->
      <div v-else-if="dateTime" class="signView">
        <div class="associationBtn ellipsis1">
          课程有效期至{{ dateTime }}
        </div>
      </div>

    </div>
    <div v-else>
      <!-- 无等级限制的计划 -->
      <div v-if="planInfo.hasBuyPlan === 0" class="signView">

        <div v-if="planInfo.planAttr.planType == 2" class="associationBtn ellipsis1" @click="associationClick">
          验证培训资格激活课程
        </div>
        <div v-if="planInfo.planAttr.buyType == 2" class="buyBtn ellipsis1" @click="buyClick">
          购买课程￥{{ price }}
        </div>
      </div>
      <!--单独购买的无等级限制的计划  已经购买过的-->
      <!--课程有效期至{{dateTime}}-->
      <div v-else-if="buySubjectTime" class="signView">
        <div class="associationBtn ellipsis1">
          课程有效期至{{ buySubjectTime }}
        </div>
      </div>
    </div>

    <identity-cover v-model="showIdentity"></identity-cover>

    <van-popup v-model="showPayCover" position="bottom">
      <pay-cover :price="price" @sendCloseCover="closeCover" @sendPayWithType="payWithType"/>
    </van-popup>
  </div>
</template>

<script>

  import planDetail from './planDetail'
  import IdentityCover from './components/IdentityCover'
  import PlanTopM from './components/PlanTopM'
  import PlanCourseM from './components/PlanCourseM'
  import PlanAPI from '../../repo/api/PlanAPI'
  import {Dialog, Popup, Toast} from 'vant'
  import {payTool} from '../../utils/payTool'
  import PayCover from '../course/coursedetail/components-m/PayCover'
  // import Vue from 'vue'
  import BuyAPI from '../../repo/api/BuyAPI'
  import {formatDate} from '../../utils/format_utils'
  import levelName from '../../utils/level_util'
  import {SiteDirectory} from '../../repo/env/Constants'
  import {isIOS} from '../../utils/util'

  Vue.use(Popup)
  Vue.use(Dialog)

  export default {
    name: 'plan-detail-m',
    metaInfo: {
      title: '课程',
    },
    data() {
      return {
        planId: this.$route.params.planId,
        planInfo: {},
        showIdentity: false,
        showPayCover: false,
      }
    },
    components: {
      PlanTopM,
      PlanCourseM,
      IdentityCover,
      PayCover
    },
    mounted() {

      window.onpageshow = function (e) {
        if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
          window.location.reload()
        }
      }
      window['jsGetSalesCallBack'] = (jsonStr) => {
        this.jsGetSalesCallBack(jsonStr)
      }
      this.loadData()
    },
    computed: {
      price() {
        if (this.planInfo.planAttr) {
          return this.planInfo.planAttr.buyPrice
        }
        return 0
      },

      buySubjectTime() {
        if (this.planInfo.subjectList) {
          if (this.planInfo.subjectList[0].endTimeLong && this.planInfo.subjectList[0].endTimeLong != 0) {
            let endTime = new Date(this.planInfo.subjectList[0].endTimeLong)
            return formatDate(endTime, 'YYYY年MM月DD日')
          }
        }
        return ''
      },
      dateTime() {
        if (this.planInfo.orderInfo.endDatetimeLong) {
          if (this.planInfo.orderInfo.endDatetimeLong != 0) {
            let endTime = new Date(this.planInfo.orderInfo.endDatetimeLong)
            return formatDate(endTime, 'YYYY年MM月DD日')
          }
        }
        return ''
      },
      level() {
        return levelName(this.planInfo)
      },
    },
    methods: {
      jsGetSalesCallBack(callback) {
        let data = typeof callback === 'object' ? callback : JSON.parse(callback)
        if (data) {
          Dialog.confirm({
            message: data.content,
            confirmButtonText: '去联系',
          }).then(() => {
            window.open(`tel://${data.tellPhone}`)
          })
        }
      },
      certClick() {
        //领取证书
        //callBack status 1为领取成功  2为未绑定身份证  3查看证书
        // 4未完成课程测试 有大考     5未完成课程测试 无大考      6已完成课程测试 未完成大考
        planDetail.receiveCertificate(this.planInfo, (status) => {
          if (status == 1) {
            this.loadData()
          } else if (status == 2) {
            this.showIdentity = true
          } else if (status == 3) {
            this.$router.push(`/cert/${this.planInfo.certInfo.id}/${this.$store.getters.userid}`)
          } else if (status == 4) {
            Toast('未完成课程测试,请在完成测试后参加大考')
          } else if (status == 5) {
            Toast('未完成课程测试,请在完成测试后再领取证书')
          } else if (status == 6) {
            let examId = this.planInfo.overallExamIds[0]
            let planId = this.planInfo.id
            this.$_router.push(`/exam/normal/${examId}/${planId}/2`)
          }
        })
      },
      associationClick() {
        window.location.href = window.location.origin + SiteDirectory + 'activate-course?userid=' + this.$store.getters.userid + '&hy=' + this.$store.getters.hsId
      },
      buyClick() {
        this.showPayCover = true
      },
      closeCover() {
        this.showPayCover = false
      },
      payWithType(type) {

        if (window.hasOwnProperty('zshft')) {
          if (isIOS) {
            window.zshft.jsGetSalesCall('jsGetSalesCallBack')
          } else {
            this.showPayCover = false
            payTool.buyItem(2, type, this.planId)
          }
        }

      },
      loadData() {
        PlanAPI.getPlanDetail(this.planId).then((result) => {
          this.planInfo = result.responseData
        })
      },
      levelUp() {
        this.$router.push({name: 'myOrg'})
      }

    }
  }
</script>

<style scoped>
  .signView {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    width: 100%;
  }

  .associationBtn {
    width: 100%;
    text-align: center;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #1DA1F2;
    flex: 1;
  }

  .buyBtn {
    flex: 1;
    width: 100%;
    text-align: center;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #005BAB;
  }
</style>
